<template>
  <div class="app-container">
    <el-main>
      <el-row :gutter="20" type="flex" align="center">
        <el-col>
          <el-button type="primary" size="mini" @click.native="showAdd()" v-permission="'overtime_apply_add'">加班申请
          </el-button>
        </el-col>
      </el-row>

      <el-table stripe ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" v-loading="tabLoading"
                style="width: 100%" border highlight-current-row @selection-change="handleSelectionChange" row-key="id"
      >
        <el-table-column type="index" label="序号" width="50">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="160"></el-table-column>
        <el-table-column prop="end_time" label="结束时间" width="160"></el-table-column>
        <el-table-column prop="reason" label="加班事由" show-overflow-tooltip></el-table-column>
        <el-table-column prop="user_name" label="申请人" width="100"></el-table-column>
        <el-table-column prop="flow_status" label="状态" align="center" width="160" fixed="right">
          <template slot-scope="scope">
            <el-tag class="names-tag" size="mini" v-if="scope.row.flow_status==1" type="danger">
              撤销
            </el-tag>
            <el-tag class="names-tag" size="mini" v-if="scope.row.flow_status==2" type="danger">
              拒绝
            </el-tag>
            <el-tag class="names-tag" size="mini" v-if="scope.row.flow_status==3">
              {{ scope.row.flow_current_node_name }}
            </el-tag>
            <el-tag class="names-tag" size="mini" v-if="scope.row.flow_status==4" type="success">
              通过
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页数据 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current"
                     :page-sizes="[10, 20, 50, 100, 200, 500]" :page-size="listParams.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
      ></el-pagination>
    </el-main>

    <el-dialog :close-on-click-modal="false" title="加班申请" center :visible.sync="dialogCU"
               width="40%"
               @close="dialogCUClose('cuForm')"
    >
      <el-form ref="cuForm" v-loading="dialogCULoading" :rules="cuRules" :model="cuForm" label-width="100px" center>
        <el-row class="row-bg">
          <el-col :span="24">

            <el-form-item label="开始时间" prop="start_time">
              <el-col :span="22">
                <el-date-picker filterable clearable v-model="cuForm.start_time" type="datetime" placeholder="请选择开始时间"
                                value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
                                :disabled="cuForm.id!=null"
                ></el-date-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="结束时间" prop="end_time">
              <el-col :span="22">
                <el-date-picker filterable clearable v-model="cuForm.end_time" type="datetime" placeholder="请选择结束时间"
                                value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
                                :disabled="cuForm.id!=null"
                ></el-date-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="加班事由" prop="reason">
              <el-col :span="22">
                <el-input clearable type="textarea" v-model.trim="cuForm.reason" :rows="4" maxlength="50"
                          show-word-limit
                          placeholder="请输入加班事由" :disabled="cuForm.id!=null"
                >>
                </el-input>
              </el-col>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogCU=false">取消</el-button>
				<el-button type="primary" @click.native="onSubmit()" v-show="cuForm.id==null">提交</el-button>
			</span>
    </el-dialog>

  </div>
</template>

<script>
import {
  list,
  add
} from '@/api/attendance/overtime_apply.js'
import {
  Message
} from 'element-ui'

export default {
  data() {

    return {

      // search form
      searchForm: {},
      // page option
      total: null, // 总页数
      current: 1, // 当前页

      // list table
      tableData: [], // 列表数据
      selectIds: [], // 多选选项id

      listParams: {
        page: 1,
        page_size: 10
      }, // list参数
      tabLoading: true,
      // CU dialog
      dialogCULoading: false,
      dialogCU: false, // 增修弹框显示

      cuForm: {
        id: null,
        start_time: null,
        end_time: null,
        reason: null
      },
      cuRules: {
        start_time: [{
          required: true,
          message: '请选择开始时间',
          trigger: ['blur', 'change']
        }, {
          validator: this.validationStartTime,
          trigger: ['blur', 'change']
        }],
        end_time: [{
          required: true,
          message: '请选择结束时间',
          trigger: ['blur', 'change']
        }, {
          validator: this.validationEndTime,
          trigger: ['blur', 'change']
        }],
        reason: [{
          required: true,
          message: '请输入加班事由',
          trigger: ['blur', 'change']
        }]
      }
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  mounted: function() {
  },
  methods: {
    // 校验开始时间
    validationStartTime(rule, val, callback) {
      if (val && this.cuForm.end_time && new Date(this.cuForm.end_time) - new Date(val) < 0) {
        callback(new Error('开始时间不能大于结束时间'))
      } else {
        callback()
      }
    },
    // 校验结束时间
    validationEndTime(rule, val, callback) {
      if (val && this.cuForm.start_time && new Date(val) - new Date(this.cuForm.start_time) < 0) {
        callback(new Error('结束时间不能小于开始时间'))
      } else {
        callback()
      }
    },
    // 新增弹出框
    showAdd() {
      this.$router.push(
        {
          name: 'overtime_apply_info',
          params: {
            is_created: true
          }
        }
      )
    },
    showView(row) {
      const that = this
      that.cuForm = Object.assign({}, row)
      that.dialogCU = true
      that.dialogCULoading = false
    },
    // 关闭弹窗
    dialogCUClose(formName) {
      const that = this
      switch (formName) {
        case 'cuForm':
          that.$refs['cuForm'].clearValidate()
          break
      }
    },

    resetForm() {
      this.cuForm = {
        id: null,
        start_time: null,
        end_time: null,
        reason: null
      }
    },

    // 提交数据 增、改
    onSubmit() {
      // 表单校验
      this.$refs.cuForm.validate(valid => {
        // ~ 校验通过
        if (valid) {
          var obj = Object.assign({}, this.cuForm)

          // 显示loading
          this.dialogCULoading = true

          delete obj.created_at
          delete obj.updated_at
          delete obj.deleted_at

          // ~~ 添加
          delete obj.id
          this.onAdd(obj)

        } else {
          // ~ 不通过
          return false
        }
      })
    },
    // 添加
    onAdd(obj) {
      return add(obj)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            this.dialogCU = false
            this.getList()
          }
          this.dialogCULoading = false
        })
        .catch(() => {
          this.dialogCULoading = false
        })
    },
    // 获得table列表
    getList() {
      this.tabLoading = true
      return list(this.listParams)
        .then(res => {
          let {
            data: {
              records,
              total
            }
          } = res
          this.tableData = records
          this.total = total
          this.tabLoading = false
        })
        .catch(() => {
          this.tabLoading = false
        })
    },
    // 表单多选
    handleSelectionChange(val) {
      this.selectIds = val.map(item => item.id)
    },
    // 分页 -pageSize改变
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    // 分页 -pageNum改变
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    //带状态表格
    tableRowClassName({
      row
    }) {
      if (row.status === 0) {
        return 'stop-row'
      }
      return ''
    }
  }
}
</script>
<style scoped>
.search .el-form-item:last-child {
  margin-left: 35px;
}

.el-date-editor > .el-range-separator {
  width: 8% !important;
}

.operation button {
  padding: 8px;
}

.el-pagination {
  margin-top: 40px;
}
</style>
<style lang="scss" scoped>
.app-container {
  .el-table {
    margin-top: 20px;

    .stop-row {
    }
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>

